<template>
  <div class="用户列表容器">
    <el-card class="搜索卡片">
      <el-form :inline="true" :model="搜索表单" class="搜索表单">
        <el-form-item label="账号">
          <el-input v-model="搜索表单.用户名" placeholder="请输入账号" prefix-icon="el-icon-search" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="搜索">查询</el-button>
          <el-button icon="el-icon-refresh" @click="重置搜索">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="表格卡片">
      <div class="按钮组">
        <el-button type="primary" v-if="hasPermission('/system/user/add')" icon="el-icon-plus" @click="添加用户">新增用户</el-button>
        <el-button type="warning" v-if="hasPermission('/system/user/update')" icon="el-icon-edit" @click="编辑用户" :disabled="选中行.length !== 1">编辑用户</el-button>
        <el-button type="danger" v-if="hasPermission('/system/user/delete')" icon="el-icon-delete" @click="删除用户" :disabled="选中行.length === 0">删除用户</el-button>
      </div>
      
      <el-table
        ref="用户表格"
        :data="表格数据"
        style="width: 100%"
        @selection-change="处理选择变化"
        border
        stripe
        highlight-current-row
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="username" label="账号" width="180" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button type="text" size="small" @click="编辑单个用户(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="删除单个用户(scope.row)" style="color: #F56C6C;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
   <div class="分页容器">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="当前页"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="总数"
          background
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUserList, deleteUser } from '@/api/user'
import { hasPermission } from '@/utils/permissions'
export default {
  data() {
    return {
      搜索表单: {
        用户名: ''
      },
      表格数据: [],
      当前页: 1,
      页面大小: 10,
      总数: 0,
      选中行: []
    }
  },
  created() {
    this.获取数据()
  },
  methods: {
    async 获取数据() {
      try {
        const { data } = await getUserList({
          page: this.当前页,
          rows: this.页面大小,
          username: this.搜索表单.用户名
        })
        this.表格数据 = data.data.rows
        this.总数 = data.data.total
      } catch (error) {
        console.error('获取用户列表失败:', error)
        this.$message.error('获取用户列表失败')
      }
    },
    搜索() {
      this.当前页 = 1
      this.获取数据()
    },
    重置搜索() {
      this.搜索表单.用户名 = ''
      this.搜索()
    },
    处理页面大小变化(val) {
      this.页面大小 = val
      this.获取数据()
    },
    处理当前页变化(val) {
      this.当前页 = val
      this.获取数据()
    },
    添加用户() {
      this.$router.push('/users/add')
    },
    编辑用户() {
      if (this.选中行.length !== 1) {
        this.$message.warning('请选择一条记录进行编辑')
        return
      }
      const 用户ID = this.选中行[0].id
      this.$router.push(`/users/edit/${用户ID}`)
    },
    编辑单个用户(row) {
      this.$router.push(`/users/edit/${row.id}`)
    },
    async 删除用户() {
      if (this.选中行.length === 0) {
        this.$message.warning('请选择要删除的记录')
        return
      }
      try {
        await this.$confirm('确认删除选中的用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const ids = this.选中行.map(row => row.id)
        await deleteUser(ids)
        this.$message.success('删除成功')
        this.获取数据()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除用户失败:', error)
          this.$message.error('删除用户失败')
        }
      }
    },
    async 删除单个用户(row) {
      try {
        await this.$confirm(`确认删除用户 ${row.username}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await deleteUser([row.id])
        this.$message.success('删除成功')
        this.获取数据()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除用户失败:', error)
          this.$message.error('删除用户失败')
        }
      }
    },
    处理选择变化(val) {
      this.选中行 = val
    },
    hasPermission(permission) {
      return hasPermission(this.$store, permission);
    }
  }
}
</script>

<style scoped>
.用户列表容器 {
  padding: 20px;
}

.搜索卡片 {
  margin-bottom: 20px;
}

.搜索表单 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.表格卡片 {
  margin-bottom: 20px;
}

.按钮组 {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}

.按钮组 .el-button {
  margin-right: 10px;
}

.分页容器 {
  margin-top: 20px;
  text-align: right;
}

.el-table {
  margin-top: 20px;
}
</style>